<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link rel="stylesheet" th:href="@{/css/main/layui.css}">
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>


<style type="text/css">
	/*.ph{
		width: 35%;
		!*height: 100%;*!
		border: 1px solid #e8e4e4;
		float: left;
	}*/
	.pc{
		width: 100%;
		/*height: 100%;*/
		border: 1px solid #e8e4e4;
		float:left;
		margin-left: 2px;
	}
	#usetab{
		/*height: 89%;*/
	}
</style>
<body>

<input type="hidden" id="byqId" th:value="*{byqId}"/>
<!--<input type="hidden" id="taskId" th:value="*{taskId}"/>-->
<!-- 照片 -->
<!--<div class="ph">
	<div class="layui-tab">
		<ul class="layui-tab-title">
			<li class="layui-this">点位照片</a></li>
		</ul>
		<div class="layui-tab-content">
			<div class="layui-tab-item layui-show">
				<iframe src="#" name="frame0" id="frame0" width="100%" height="399px" frameborder="0" onload="changeFrameHeight0()"></iframe>
			</div>
		</div>
	</div>
</div>-->

<div class="pc">
	<div class="layui-tab">
		<ul class="layui-tab-title">
			<li class="layui-this">台账明细</li>
			<li>杆位明细</li>
			<li>表箱明细</li>
			<li>表计明细</li>
		</ul>
		<div class="layui-tab-content">
			<div class="layui-tab-item layui-show">
				<iframe src="#" name="frame1" id="frame1" width="100%" height="399px" frameborder="0" onload="changeFrameHeight1()"></iframe>
			</div>
			<div class="layui-tab-item">
				<iframe src="#" name="frame2" id="frame2" width="100%" height="399px" frameborder="0" onload="changeFrameHeight2()"></iframe>
			</div>
			<div class="layui-tab-item">
				<iframe src="#" name="frame3" id="frame3" width="100%" height="399px" frameborder="0" onload="changeFrameHeight3()"></iframe>
			</div>
			<div class="layui-tab-item">
				<iframe src="#" name="frame4" id="frame4" width="100%" height="399px" frameborder="0" onload="changeFrameHeight4()"></iframe>
			</div>
		</div>
	</div>
</div>

<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">

    var byqId = $("#byqId").val();	//	变压器ID
//    var taskId = $("#taskId").val();	//	任务ID

    $(function() {

        //	选中li时设置样式
        $("ul li").click(function() {
            $(this).siblings('li').removeClass('layui-this');
            $(this).addClass('layui-this');
        });

        //	照片
//        $("#frame0").attr("src",ctx+"assets/iLine/getPicture/"+pointId);
        //  台账
        $("#frame1").attr("src",ctx + "assets/ThyDetiail/showTZ/"+byqId);
        //	杆位明细
        $("#frame2").attr("src",ctx + "assets/ThyDetiail/showGT/"+byqId);
        //  表箱明细
        $("#frame3").attr("src",ctx + "assets/ThyDetiail/showBX/"+byqId);
        //  表计明细
        $("#frame4").attr("src",ctx + "assets/ThyDetiail/showBJ/"+byqId);
    });


    /*function changeFrameHeight0(){
        var ifm= document.getElementById("frame0");
        ifm.height=document.documentElement.clientHeight;
    }*/function changeFrameHeight1(){
        var ifm= document.getElementById("frame1");
        ifm.height=document.documentElement.clientHeight;
    }function changeFrameHeight2(){
        var ifm= document.getElementById("frame2");
        ifm.height=document.documentElement.clientHeight;
    }function changeFrameHeight3(){
        var ifm= document.getElementById("frame3");
        ifm.height=document.documentElement.clientHeight;
    }function changeFrameHeight4(){
        var ifm= document.getElementById("frame4");
        ifm.height=document.documentElement.clientHeight;
    }

    window.onresize=function(){
//        changeFrameHeight0();
        changeFrameHeight1();
        changeFrameHeight2();
        changeFrameHeight3();
        changeFrameHeight4();
    }



    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });


</script>
</body>
</html>


